<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>工具提示条</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style rel="stylesheet" type="text/css">
#tooltip {
	position: absolute;
	z-index: 2;
	background: #efd;
	border: 1px solid #ccc;
	padding: 3px;
}
.highlight {
	background: Chartreuse;
}
.clickable {
	cursor: pointer;
}
#symbol {
}
  </style>
  <script src="../jquery-1.8.2.js"></script>
  <script>
/**
 * 智能的工具提示条
 * 可折叠扩展工具条
 *
 *
 * by yxz 2012-11-06
 */
$(document).ready(function() {

	// 工具提示条
	var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
	var positionTooltip = function(event) {
		var tPosX = event.pageX;
		var tPosY = event.pageY + 20;
		$tooltip.css({top: tPosY, left: tPosX});  // 不要搞错方向了。上下为 Y 轴，水平为 X 轴。
	};
	var showToolTip = function(event) {
		var action = 'HighLight';
		if ($(this).parent().is('.highlight'))
		{
			action = 'UnHighLight';
		}
		var content = $(this).text();
		$tooltip.text(action + ' the row by ' + content).show();
		positionTooltip(event);
	};
	var hideTooltip = function() {
		$tooltip.hide();
	};
	var $highlightCells = $('table td:nth-child(2)');
	$highlightCells.addClass('clickable').hover(showToolTip, hideTooltip).mousemove(positionTooltip)
	.click(function(event) {
		var content = $(this).text();
		$highlightCells.each(function(index) {
			if (content == $(this).text())
			{
				$(this).parent().toggleClass('highlight');
			}
			else
			{
				$(this).parent().removeClass('highlight');
			}
		});
		showToolTip.call(this, event);  // this 才是当前的作者单元格，event 传递给了 showToolTip
	});

	// 折叠和扩展实现
	var collapseText = 'Collapse this section';
	var expandText = 'Expand this section';
	//;
	$('table tbody').each(function() {
		var $section = $(this);
		/**
		 * $symbol 放在外面的话，if 语句中的 $section 将变成全部的 tbody
		 *
		 *
		 */
		var $symbol = $('<span id="symbol"></span>').attr('title', collapseText).text('-')
		.addClass('clickable').prependTo('th').click(function() {
			if ($section.is('.collapsed'))
			{
				$section.removeClass('collapsed').find('tr:not(:has(th))').fadeIn('normal');
				$(this).text('-').attr('title', collapseText);
			}
			else
			{
				$section.addClass('collapsed').find('tr:not(:has(th))').fadeOut('normal');
				$(this).text('+').attr('title', expandText);
			}
		});
	});
});
  </script>
 </head>

 <body>
  <table border="1">
   <tbody>
   <tr>
    <th colspan="3" align="left">abc</th>
   </tr>
   <tr>
	<td>abcabcabcabc</td>
	<td>　a　</td>
	<td>hijabcabcabc</td>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　b　</td>
	<td>qvwabcabcabc</td>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　c　</td>
	<td>qvwabcabcabc</td>
   </tr>
   </tbody>
   <tbody>
   <tr>
    <th colspan="3" align="left">def</th>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　d　</td>
	<td>qvwabcabcabc</td>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　e　</td>
	<td>qvwabcabcabc</td>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　f　</td>
	<td>qvwabcabcabc</td>
   </tr>
   </tbody>
   <tbody>
   <tr>
    <th colspan="3" align="left">g</th>
   </tr>
   <tr>
	<td>klmabcabcabc</td>
	<td>　g　</td>
	<td>qvwabcabcabc</td>
   </tr>
   </tbody>
  </table>
 </body>
</html>
